<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-pop-preview ddp-type page-information" *ngIf="isShow">

  <!-- top -->
  <div class="ddp-ui-top">
    <div class="ddp-data-name">
      Druid Cluster Information
    </div>
    <em class="ddp-btn-popup-close" (click)="selfHide()"></em>
  </div>
  <!-- //top -->

  <!-- contents -->
  <div class="ddp-ui-preview-contents ddp-type-preview">
    <div class="ddp-type-top-option">
      <ul class="ddp-ui-tab ddp-type">
        <li [ngClass]="{'ddp-selected' : selectTab === 'common'}">
          <a href="javascript:" (click)="changeTab('common')">Common</a>
        </li>
        <li [ngClass]="{'ddp-selected' : selectTab === 'historical'}">
          <a href="javascript:" (click)="changeTab('historical')">Historical</a>
        </li>
        <li [ngClass]="{'ddp-selected' : selectTab === 'broker'}">
          <a href="javascript:" (click)="changeTab('broker')">Broker</a>
        </li>
        <li [ngClass]="{'ddp-selected' : selectTab === 'coordinator'}">
          <a href="javascript:" (click)="changeTab('coordinator')">Coordinator</a>
        </li>
        <li [ngClass]="{'ddp-selected' : selectTab === 'middleManager'}">
          <a href="javascript:" (click)="changeTab('middleManager')">Middle Manager</a>
        </li>
        <li [ngClass]="{'ddp-selected' : selectTab === 'overlord'}">
          <a href="javascript:" (click)="changeTab('overlord')">Overlord</a>
        </li>

      </ul>
    </div>
    <div class="ddp-wrap-tab-contents">
      <div class="ddp-ui-tab-contents">
        <div class="ddp-wrap-informaiton">
          <div class="ddp-ui-detail ddp-clear" *ngIf="selectTab === 'common'">
            <!-- col -->
            <div class="ddp-col-12">
              <div class="ddp-ui-title">
                Overview
              </div>
              <table class="ddp-table-detail2">
                <colgroup>
                  <col width="405px">
                  <col width="*">
                </colgroup>
                <tbody>
                <tr>
                  <th>
                    Broker Host (Port)
                  </th>
                  <td>
                    {{getServerInformation('broker')}}
                  </td>
                </tr>
                <tr>
                  <th>
                    Coordinator Host (Port)
                  </th>
                  <td>
                    {{getServerInformation('coordinator')}}
                  </td>
                </tr>
                <tr>
                  <th>
                    Overlord Host (Port)
                  </th>
                  <td>
                    {{getServerInformation('overlord')}}
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- //col -->
          </div>
          <div class="ddp-ui-detail ddp-clear ">
            <!-- col -->
            <div class="ddp-col-12">
              <div class="ddp-ui-title">
                DRUID Configuration
              </div>
              <table class="ddp-table-detail2">
                <colgroup>
                  <col width="405px">
                  <col width="*">
                </colgroup>
                <tbody>
                <tr *ngFor="let key of configKeys">
                  <th>
                    {{key}}
                  </th>
                  <td>
                    {{configs[key]}}
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- //col -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- //contents -->

</div>
